上一篇提到可以取得指定的 DOM 節點

今日來介紹可如何透過節點存取及變更文件節點

textContent

• 可以取得或更新指定元素內的文字

範例中， h1 的文字內容是 『大大大優惠』

<h1 class="header">大大大優惠</h1>

使用 textContent 將文字內容更新為『阿哈！』

const el = document.querySelector('.header');
el.textContent = '啊哈！';

執行結果如下

innerHTML

在指定的元素中，重新賦予指定的 HTML 內容，原本的資料不會被保留，只會放新的資料進去

範例是一個 div 區塊， class 名稱為 container

<div class="container"></div>

先選取到 .container 的節點，在增加 HTML 的內容
並且以樣版字面值（Template literals）的寫法處理

const main = document.querySelector('.container');
main.innerHTML = `<h1 class="header" > 招財貓之日，喵～</h1>`;

結果如下

參考資料與學習資源

• 0 陷阱！0 誤解！8 天重新認識 JavaScript！
• JavaScript 指南
• 六角學院 - JavaScript 必修篇 - 前端修練全攻略

本日小節

呼～今天練習存取節點資料及變更文字內容，今天的學習部份就到這邊了～
９２９也是日本的招財貓日，出門上班就有遇到在巷子跑來跑去的貓咪，可惜戳不到
有任何問題歡迎傳訊息給我，我們下次見！